<template>

	<el-container  class="article-list">
  		<el-header class="header" height="50px">
  			<div class="header-left">上海 晴 2° / 15°</div>
  			<div class="header-right">鼎牛产品</div>
  		</el-header>
  		<el-container class="article-container">
  			<!-- 文章标签 -->
    		<el-aside class="nav-wrap" width="150px">
    			<!-- logo -->
    			<a class="logo-wrap" href="">
    				<img class="logo" :src="logo">
    			</a>
    			<!-- nav -->
    			<ul class="nav">
    				<li v-for="(item,key) in catagoryList" :key="key" class="nav-item" :class="{'current':item.active}" @click="cataNavClick(key,item,catagoryList)">{{item.name}}</li>
    			</ul>
    		</el-aside>
    		<el-main class="main-content-wrap">

    			<el-row class="main-content" v-infinite-scroll="getArticleList" infinite-scroll-disabled="disabled" infinite-scroll-distance="80px" :gutter="30">
    				
    				<el-col v-if="articleListData.length==0" class="article-list" :span="16">
    					<el-image
		  					fit="fill"
		  					:src="nodata"
		  				></el-image>
    				</el-col>
    				<!-- 正文列表 -->
				  	<el-col v-if="articleListData.length>0" class="article-list" :span="16">
				  		
				  		<ul>

					  		<template v-for="(item,index) in articleListData">
					  			
					  			<li :key="index" v-if="isSingle(item)" class="article-list-item single-list-item" @click="goDetail(item)">
						  			<div class="img-wrap">
						  				<div class="img-item-content">
						  					<el-image
						  						lazy
						  						class="img-item" 
							  					fit="fill"
							  					:src="imgPrefix+item.thums[0]"
							  				>
							  					<div class="error-img" slot="error">
							  						<img :src="defaultImg">
							  					</div>
							  				</el-image>
						  				</div>

						  			</div>
						  			<div class="item-sum-box">
						  				<div class="box-inner">
							  				<p class="title">{{item.title}}</p>
							  				<div class="footer-bar">
							  					<el-tag effect="plain" size="mini">{{item.categoryName}}</el-tag>
							  					
							  					<!-- <span class="dot">·</span>
							  					<span class="remark">4790评论</span> -->
							  					<!-- <span class="dot">·</span> -->
							  					<span class="time">{{ convertTime(item) }}</span>
							  				</div>
							  			</div>	
						  			</div>
					  			</li>


					  			<li :key="index" v-if="!isSingle(item)" class="article-list-item multi-thum" @click="goDetail(item)">
						  			<div class="item-sum-box">
						  				<p class="title">{{item.title}}</p>
						  			</div>

						  			<div class="img-wrap">
						  				<div class="img-item-content" v-for="(thum,key) in item.thums">
						  					<el-image
						  						lazy
						  						class="img-item" 
							  					fit="fill"
							  					:src="imgPrefix+thum"
							  				>
							  					<div class="error-img" slot="error">
							  						<img :src="defaultImg">
							  					</div>
							  				</el-image>
						  				</div>

						  			</div>

					  			
						  			<div class="item-sum-box">
						  				<div class="footer-bar">
							  					<el-tag effect="plain" size="mini">{{item.categoryName}}</el-tag>
							  					
							  					<!-- <span class="dot">·</span>
							  					<span class="remark">4790评论</span> -->
							  					<!-- <span class="dot">·</span> -->
							  					<span class="time">{{ convertTime(item) }}</span>
							  				</div>
						  			</div>
					  			</li>

					  		</template>
					  	</ul>	
				  		
				  		<p v-if="dataLoading">加载中...</p>
    					<p v-if="noMoreData">没有更多了</p>
				  		

				  		

				  		

				  		
				  	</el-col>

				  	<!-- 广告 -->
				  	<el-col :span="8">
				  		<!-- 登录注册 -->
				  		<div class="login-reg-wrap">
				  			
				  			<el-tabs class="login-reg-tabs" v-model="loginReg">
							    <el-tab-pane label="登陆" name="login">
							    	
							    	<el-form>
							    		<el-form-item>
							    			<el-input placeholder="手机号"></el-input>
							    		</el-form-item>

							    		<el-form-item>
							    			<el-input placeholder="密码"></el-input>
							    		</el-form-item>

							    		<el-form-item>
							    			<el-button class="orange form-submit" type="primary">提交</el-button>
							    		</el-form-item>
							    	</el-form>

							    </el-tab-pane>

							    <el-tab-pane label="注册" name="reg">配置管理</el-tab-pane>
							</el-tabs>

				  		</div>
				  	</el-col>
				</el-row>

			</el-main>

  		</el-container>
	</el-container>

</template>

<script>
	import { cateList, articleList } from "@/api/content/list"
	import { deepClone } from "@/utils/util"
	import { baseUrl } from '@/config/env';

	//获取图片的url
	const imgPrefix = baseUrl+'/rest/common/preview/';

	export default{
		data(){
			return{
				//无限滚动的loading
				dataLoading:false,
				//服务器图片前缀
            	imgPrefix:imgPrefix,
            	//无数据默认图
            	nodata:require("@/assets/dingNiu/nodata.png"),
            	defaultImg:require("@/assets/dingNiu/default.jpg"),
				logo:require("@/assets/logo.png"),
				//登录还是注册
				loginReg:'login',
				catagoryList:[],
				articleListData:[],
				//当前cateid
				curCategoryId:'',
				page:{
					pageSize:20,
					currentPage:1,
					total:0
				}
			}
		},
		mounted(){
			//设置cata
			//this.init();
			this.getCateList();
			this.getArticleList();
		},
		computed:{
			noMoreData(){
				return this.articleListData >= this.page.total;
			}
		},
		watch:{
			curCategoryId(val){
				this.getArticleList();
			}
		},
		methods:{
			init(){
				//设置面包屑层级
				this.$store.dispatch('setLevel',{level:0,data:{name:'首页',url:'/content/index'}})

				var cateId = this.$route.query.cateId;
				if (cateId) {
					this.curCategoryId = cateId;
					for(var i=0;i<this.catagoryList.length;i++){
						
						if(this.catagoryList[i].id == cateId){
							this.catagoryList[i].active = true;
						}else{
							this.catagoryList[i].active = false;
						}
					}
				}
			},
			//获取文章标签
			getCateList(){
				cateList().then((res)=>{
					console.log("-------前端页面获取文章分类--------")
					console.log(res)
					var all = {name:'全部',id:'',active:true};
					var result = res.data.data;

					for(var i=0;i<result.length;i++){
						result[i]["active"] = false;
					}

					result.unshift(all);
					this.catagoryList = result;

					this.init();
				})
			},
			//获取文章列表
			getArticleList(){

				this.dataLoading = true;
				if(this.currentPage >= 1){
					this.currentPage++;
				}
				articleList(this.page.currentPage,this.page.pageSize,this.curCategoryId).then((res)=>{
					console.log("-------前端页面获取文章列表--------")
					console.log(res)
					this.dataLoading = false;

					this.page.total = res.data.data.total;
					this.articleListData = this.convertArticleData(res.data.data.records).concat(this.articleListData);

					console.log(this.articleListData)
				})
			},
			//重构获取的文章列表数据
			convertArticleData(data){
				var result = deepClone(data);
				for(var i=0;i<result.length;i++){
					if(result[i].converIds === ""){
						result[i]["thums"] = [];
					}else{
						result[i]["thums"] = result[i].converIds.split(',');
					}
					
				}
				return result;
			},
			//判断是否多图
			isSingle(item){
				var thums = item.thums;
				var temp_arr = [];
				if(thums.length == 0){
					return true;
				}

				for(var i=0;i<thums.length;i++){
					if(thums[i]){
						temp_arr.push(thums[i])
					}
				}

				
				if(temp_arr.length>1){
					return false;
				}

				return true;
			},
			//跳转文章详情
			goDetail(item){

				//添加面包屑
				this.$store.dispatch('setLevel',{level:1,data:{name:item.categoryName,url:`/content/index?cateId=${item.categoryId}`}})

				this.$router.push({
					path:`/content/detail/${item.id}`,
					query:{
						cateId:item.categoryId
					}
				})
			},
			//转换时间
			convertTime(item){
				return item.createTime
			},
			//点击文章分类导航
			cataNavClick(index,item,list){
				if(item.active == true){
					return;
				}

				for(var i=0;i<list.length;i++){
					list[i].active = false;
				}

				item.active = true;
				this.curCategoryId = item.id;
				this.$router.replace({
					path:'/content/index',
					query:{
						cateId:this.curCategoryId
					}
				})
			}
		},

	}

</script>


<style>
	/*修改登陆tab样式*/
	.login-reg-tabs .el-tabs__nav{
		width: 100%;
		display: flex;
	}

	.login-reg-tabs .el-tabs__nav .el-tabs__item{
		flex: 1;
		padding: 0;
		text-align: center;
	}

	.login-reg-tabs .el-tabs__nav .el-tabs__item.is-active,.login-reg-tabs .el-tabs__nav .el-tabs__item:hover{
		color: #FF8100;
	}

	.login-reg-tabs .el-tabs__active-bar{
		background-color: #FF8100;
	}

	.article-list .el-header{
		padding: 0;
		position: fixed;
		width: 100%;
		left: 0;
		top: 0;
		z-index: 1500;
	}
</style>


<style scoped>
	.header{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		background: #000;
		color: #fff;
		padding: 0 40px;
		line-height: 50px;
	}

	.article-container{
		padding: 0 20px;
		margin-top: 50px;
	}

	.nav-wrap{
		padding: 20px;
		background-color: #ffffff;
	}
	.logo-wrap,.logo-wrap .logo{
		width:100%;
	}

	.nav{
		list-style: none;
		width: 100%;
		padding: 0;
		margin-top: 0;
		text-align: center;
	}

	.nav .nav-item{
		width: 100%;
		border-radius: 4px;
		padding: 5px 0;
		background-color: #FFFFFF;
		color: #444;
		font-size: 16px;

	}

	.nav .nav-item.current{
		background-color: #FF8100;
		color: #ffffff;
	}

	.nav .nav-item:hover {
	    animation-name: hvr-back-pulse;
	    animation-duration: .2s;
	    animation-timing-function: linear;
	    animation-iteration-count: 1;
	    background-color: #FF8100;
	    color: #fff;
	}

	@keyframes hvr-back-pulse{
		0%{
			background-color:rgba(255,129,0,.6)
		}
		50%{
			background-color:rgba(255,129,0,.76)
		}	
	}

	/*正文列表*/
	.article-list-item{
		list-style: none;
		display: flex;
		flex-direction: row;
		padding: 10px 0;
		border-bottom: 1px solid #e8e8e8;
		cursor: pointer;
	}

	/*单图*/
	.single-list-item .img-wrap .img-item-content{
		width: 156px;
		height: 100px;
		margin-right: 10px;
		overflow: hidden;
	}


	.single-list-item .item-sum-box{
		display: flex;
    	align-items: center;
	}
	
	.single-list-item .img-wrap .img-item-content .img-item{
		max-width: 100%;
	    height: auto;
	    vertical-align: middle;
	}

	.error-img,.error-img>img{
		width: 100%;
		height: 100%;
	}
	/*多图*/
	.article-list-item.multi-thum{
		flex-direction: column;
	}

	.article-list-item.multi-thum .img-wrap{
		width: 100%;
		display: flex;
    	flex-direction: row;
		margin-bottom: 10px;
	}

	.article-list-item.multi-thum .img-wrap>.img-item-content{
		width: 156px;
		height: 100px;
		margin-right: 5px;
		overflow: hidden;
	}

	.article-list-item.multi-thum .img-wrap>.img-item-content>.img-item{
		max-width: 100%;
	    height: 100%;
	    vertical-align: middle;
	}

	.item-sum-box{
		flex-grow: 1;
	}

	.item-sum-box .title{
		font-size: 20px;
		font-weight: 700;
		color: #222;
		line-height: 1.3;
		margin-top: 0;
		margin-bottom: 10px;
	}

	.footer-bar .source,.footer-bar .remark{
		font-size: 14px;
		color: #777;
	}

	.footer-bar .dot{
		color: #666;
	}

	.footer-bar .time{
		font-size: 14px;
		color: #888;
	}

	/*右侧登陆*/
	.form-submit{
		width: 100%;
	}
</style>

